<template>
	<view>
		<view class="yaoqingbox">
			<view class="yaoqingtitile">可获得娃娃币上不封顶</view>
			<view class="flex ac jb">
				<view class="yaoqinglist">
					<view>邀请好友</view>
					<view>成为新用户</view>
					<view class="yaoqingbuttom">
						<image style="width: 50rpx;height: 50rpx;" src="https://h5.bjchangyukeji.cn/img/zzb_coin.d3f99307.png"></image>
						<view>+10</view>
					</view>
				</view>
				<view class="yaoqinglist">
					<view>受邀请新用户</view>
					<view>消耗抓币</view>
					<view>抓5次娃娃</view>
					<view class="yaoqingbuttom">
						<image style="width: 50rpx;height: 50rpx;" src="https://h5.bjchangyukeji.cn/img/zzb_coin.d3f99307.png"></image>
						<view>+25</view>
					</view>
				</view>
				<view class="yaoqinglist">
					<view>受邀新用户</view>
					<view>首次充值</view>
					<view class="yaoqingbuttom">
						<image style="width: 50rpx;height: 50rpx;" src="https://h5.bjchangyukeji.cn/img/zzb_coin.d3f99307.png"></image>
						<view>+100</view>
					</view>
				</view>
			</view>
			<view class="flex ac" style="justify-content:center;margin-bottom: 20rpx;">
				<view class="buttomleft">如何邀请</view>
				<view class="buttomright">邀请好友</view>
			</view>
		</view>
		
		<view class="userbox">
			<view class="usertitle">我都邀请</view>
			<view class="userview flex ac">
				<image class="userviewleftimage" src="https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/Fqo9wRszOq99NLFC0S4uXlEql_MU.jpg"></image>
				<view style="font-size: 29rpx;flex: 1;margin-left: 10rpx;">已邀请<text style="color:#E75530;">x0</text>个好友</view>
				<view class="flex ac">
					<image style="width: 50rpx;height: 50rpx;" src="https://h5.bjchangyukeji.cn/img/zzb_coin.d3f99307.png"></image>
					<view>+0</view>
				</view>
			</view>
			<view class="userview flex ac">
				<image class="userviewleftimage" src="https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/Fqo9wRszOq99NLFC0S4uXlEql_MU.jpg"></image>
				<view style="font-size: 29rpx;flex: 1;margin-left: 10rpx;"><text style="color:#E75530;">0</text>个好友抓取任务</view>
				<view class="flex ac">
					<image style="width: 50rpx;height: 50rpx;" src="https://h5.bjchangyukeji.cn/img/zzb_coin.d3f99307.png"></image>
					<view>+0</view>
				</view>
			</view>
			<view class="userview flex ac">
				<image class="userviewleftimage" src="https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/Fqo9wRszOq99NLFC0S4uXlEql_MU.jpg"></image>
				<view style="font-size: 29rpx;flex: 1;margin-left: 10rpx;"><text style="color:#E75530;">0</text>个好友进行了充值</view>
				<view class="flex ac">
					<image style="width: 50rpx;height: 50rpx;" src="https://h5.bjchangyukeji.cn/img/zzb_coin.d3f99307.png"></image>
					<view>+0</view>
				</view>
			</view>
		</view>
		
		<view class="explainbox">
			<view class="explaintitle">规则说明</view>
			<view>1.活动时间：2024/1/1-2024/5/30 23:59:59</view>
			<view>2.只有通过点击本页面 “邀请好友” 按钮分享。才会获取奖励！</view>
			<view>3.活动获得的抓抓币会实时发放到您的账户余额中。</view>
			<view>4.好友点击您的分享链接进入小程序并完成注册成为新用户，你即可获取10抓抓币。</view>
			<view>5.受邀请新用户在非试玩房间，消耗抓抓币进行2次及以上抓娃娃，您即可获得25抓抓币。</view>
			<view>6.受邀新用户完成首次充值，您可获得100抓抓币；每邀请一个新用户并完成全部任务最多可获得135抓抓币，邀请新用户数上不封顶。</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.yaoqingbox{
		margin: 20rpx;
		border: 1px solid red;
	}
	
	.yaoqingtitile{
		text-align: center;
		font-weight: bold;
		font-size: 30rpx;
		margin-bottom: 20rpx;
	}
	
	.yaoqinglist{
		width: 200rpx;
		height: 280rpx;
		background-color: red;
		margin-bottom: 20rpx;
	}
	
	.yaoqinglist{
		display: flex;
		align-items: center;
		flex-direction:column;
		color: #ffffff;
	}
	
	.yaoqingbuttom{
		display: flex;
		align-items: center;
		background-color: #C162F4;
		padding: 7rpx 20rpx;
		border-radius: 30rpx;
		margin-top: 20rpx;
	}
	
	.buttomleft{
		width: 250rpx;
		height: 70rpx;
		background-color: red;
		color: #ffffff;
		text-align: center;
		line-height: 70rpx;
		border-radius:50rpx;
	}
	
	.buttomright{
		width: 250rpx;
		height: 70rpx;
		background-color: red;
		color: #ffffff;
		text-align: center;
		line-height: 70rpx;
		margin-left: 30rpx;
		border-radius:50rpx;
	}
	
	
	.userbox{
		border: 1px solid red;
		margin: 20rpx;
		padding: 0 20rpx;
	}
	
	.usertitle{
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
	}
	
	.userview{
		background-color:#F6F3FE;
		padding: 20rpx 10rpx;
		border-radius: 15rpx;
		margin-bottom: 20rpx;
	}
	
	.userviewleftimage{
		width: 80rpx;
		height: 80rpx;
	}
	
	.explainbox{
		margin: 20rpx;
		border: 1px solid red;
	}
	
	.explaintitle{
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
	}
</style>
